<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/echarts/build/dist/echarts.js" type="text/javascript"></script>
		<script src="../js/echarts/jquery-1.11.1.min.js" type="text/javascript"></script>
		<script src="../js/base.js" type="text/javascript"></script>
		
	</head>
	<body bgcolor="#181F94">
		<div id="main" style="width:300px;height:400px; float: left;"></div>
		<div class="button" style="width:100px;height:100px; float: left; margin-top: 60px;">
			<div style="font-size: 20px; margin-left: 10px; margin-top: 10px; color: #FFFFFF; cursor: pointer;" onclick="lr();"> 流入 </div>
			<div style="font-size: 20px; margin-left: 10px; margin-top: 10px; color: #FFFFFF; cursor: pointer;" onclick="lc();"> 流出 </div>
		</div>
		<div id="text" style=" display:none;width:100px;height:100px; border: 1px solid white; float: left; margin-top: 300px;">
			<div style="font-size: 20px; color:#2E67DE;margin-left: 10px; margin-top: 5px;" > <b id="cityname">芜湖市</b></div>
			<div style="font-size: 14px; color:gray;margin-left: 10px; margin-top: 5px;" > <b>流入我市人口</b></div>
			<div style="font-size: 24px; color:white;margin-left: 10px; margin-top: 5px;" id="personnum"> <b>2340</b></div>
		</div>
		 
		<script>
		require.config({
				paths: {
					echarts: server_context+"/js/echarts/build/dist"
				}
		});
			require([
			'echarts', // 代指echarts设置的路径，即'../resource/build/dist'
			'echarts/chart/map',// 加载地图,引入funnel.js文件, 按需加载,		
			], function(ec,theme) {
			// 自定义扩展图表类型：mapType = HK
			require('echarts/util/mapData/params').params.AH = {
			getGeoJson : function(callback) {
				$.getJSON(server_context+'/json/anhui3.json', callback);
				}
			}
			window.myChart = ec.init(document.getElementById('main'),theme);
			window.option = {
				 //backgroundColor: '#001771',
			     dataRange: {
			     	show: false,
			        min: 100,
			        max: 800,
			        text:['High','Low'],
			        realtime: false,
			        calculable : true,
			        color: ['orangered','yellow','lightskyblue']
			    },
				series : [ {
					type : 'map',
					selectedMode : 'single',
					mapType : 'AH', // 自定义扩展图表类型
					roam: true,
	            	hoverable: false,
					itemStyle: {
		                normal: {
		                    borderColor:'rgba(100,149,237,0.6)',
		                    borderWidth:0.5,
		                    areaStyle: {
		                       // color: '#001771'
		                    },
		                    //label:{show:true}
		                }
	            	},
	            	markLine : {
	            		clickable: false,
		                smooth:true,
		                symbol: ['circle', 'arrow'],
		                effect : {
		                    show: true,
		                    scaleSize: 1,
		                    period: 30,
		                    color: '#B6FEFA',
		                    //shadowBlur: 10
		                },
		                itemStyle : {
		                
		                    normal: {
		                    	color:'#fff',
		                        borderWidth:1,
		                        lineStyle: {
		                            type: 'solid',
		                            shadowBlur: 10
		                        }
		                    }
		                },
		                data : [ ],
		                    //[{name:'合肥市'},{name:'芜湖市'}],
		                   // [{name:'阜阳市'},{name:'芜湖市'}],
		                    //[{name:'淮南市'},{name:'芜湖市'}],
		                    //[{name:'宿州市'},{name:'芜湖市'}],
		                    //[{name:'亳州市'},{name:'芜湖市'}],
		                    //[{name:'淮北市'},{name:'芜湖市'}],
		                    //[{name:'蚌埠市'},{name:'芜湖市'}],
		                    //[{name:'滁州市'},{name:'芜湖市'}],
		                    //[{name:'马鞍山市'},{name:'芜湖市'}],
		                    //[{name:'铜陵市'},{name:'芜湖市'}],
		                    //[{name:'宣城市'},{name:'芜湖市'}],
		                    //[{name:'安庆市'},{name:'芜湖市'}],
		                    //[{name:'池州市'},{name:'芜湖市'}],
		                    //[{name:'黄山市'},{name:'芜湖市'}],
		                    //[{name:'六安市'},{name:'芜湖市'}]
		                    
		                
	            	},
	            	 geoCoord: {
		                '合肥市': [117.393403,31.733755],
		                '芜湖市': [118.349299,31.223021],	               
		                '阜阳市': [115.562872,32.905431],
		                '淮南市': [116.841484,32.383974],
		                '宿州市': [117.246225,33.877713],
		                '亳州市': [116.215976,33.338911],
		                '淮北市': [116.694306,33.777907],
		                '蚌埠市': [117.40453,33.073358],
		                '滁州市': [118.101699,32.50878],
		                '马鞍山市': [118.359261,31.686571],
		                '铜陵市': [117.621158,30.904525],
		                '宣城市': [119.051548,30.840053],
		                '安庆市': [116.578559,30.636194],
		                '池州市': [117.310704,30.352632],
		                '黄山市': [118.009801,29.970931],
		                '六安市': [116.197579,31.670837]
		                
	            	},
					data : [
						{name: '合肥市', value: 779},
		                {name: '芜湖市', value: 365.4},
		                {name: '阜阳市', value: 790.1},
		                {name: '淮南市', value: 343.1},
		                {name: '宿州市', value: 554.1},
		                {name: '亳州市', value: 504.7},
		                {name: '淮北市', value: 271.9},
		                {name: '蚌埠市', value: 329.1},
		                {name: '滁州市', value: 401.7},
		                {name: '马鞍山市', value: 226.2},
		                {name: '铜陵市', value: 159.2},
		                {name: '宣城市', value: 259.2},
		                {name: '安庆市', value: 458.6},
		                {name: '池州市', value: 143.6},
		                {name: '黄山市', value: 137.4},
		                {name: '六安市', value: 474.1}
					],
					// 自定义名称映射
					nameMap : {
					},
					// 文本位置修正
					textFixed : {
						
					}
				} ]
			};
			myChart.setOption(option);
	
			var ecConfig = require('echarts/config');
			
			function eConsole(param) {
				var name = param.name;
				if (param.type == 'hover') {
					$("#main").css("cursor", "pointer");
				}
				if (param.type == 'click') {
					$("#cityname").text(name);
					$("#text").show();
				}
				
			}
			myChart.on(ecConfig.EVENT.CLICK, eConsole);
			myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
			myChart.on(ecConfig.EVENT.HOVER, eConsole);
			myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
			myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
			myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
			myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
			})
		</script>
		
		<script type="text/javascript" >
			
			function lr(){
				
				 var d=[
			             	[{name:'合肥市'},{name:'芜湖市'}],
			            	[{name:'阜阳市'},{name:'芜湖市'}],
			                [{name:'淮南市'},{name:'芜湖市'}],
			                [{name:'宿州市'},{name:'芜湖市'}],
			                [{name:'亳州市'},{name:'芜湖市'}],
			              
			        	]
			
			 	option.series[0].markLine.data.length=0;
			    option.series[0].markLine.data=d;
			    
			    myChart._option=option;
			    myChart.setOption(option);
			}
			
			function lc(){
				var d=[
			       	[{name:'芜湖市'},{name:'铜陵市'}],
			        [{name:'芜湖市'},{name:'宣城市'}],
			        [{name:'芜湖市'},{name:'安庆市'}],
			        [{name:'芜湖市'},{name:'池州市'}],
			        [{name:'芜湖市'},{name:'黄山市'}],
			        [{name:'芜湖市'},{name:'六安市'}],
			        [{name:'芜湖市'},{name:'六安市'}]
			    ]
			  //option.series[0].markLine.data;
			  option.series[0].markLine.data=d;
			  myChart._option=option;
			   myChart.setOption(option);
			
			}
		</script>
		
	</body>
</html>
